<template>
  <div class="DatePickerRange">
    <ElDatePickerExtend
      v-bind="$attrs"
      :disabled="disabled"
      v-model="syncValue.min"
      :placeholder="minPlaceholder"
      :clearable="clearable"
      :type="type"
    ></ElDatePickerExtend>
    <div>-</div>
    <ElDatePickerExtend
      v-bind="$attrs"
      :disabled="disabled"
      v-model="syncValue.max"
      :placeholder="maxPlaceholder"
      :clearable="clearable"
      :type="type"
    ></ElDatePickerExtend>
  </div>
</template>

<script>
export default {
  name: "DatePickerRange",
  components: {
    ElDatePickerExtend: ()=>import("../ElDatePickerExtend/picker/date-picker.js")
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          max: undefined,
          min: undefined
        }
      }
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    type: String,
    disabled: Boolean,
    clearable: Boolean,
    propsMin: {
      type: Object,
      default: () => {
        return {
          placeholder: '请选择最小值'
        }
      }
    },
    propsMax: {
      type: Object,
      default: () => {
        return {
          placeholder: '请选择最大值'
        }
      }
    },
    eventsMin: Object,
    eventsMax: Object
  },
  model: {
    event: 'update:input',
    prop: 'value'
  },
  computed: {
    syncValue: {
      set(val) {
        this.$emit('update:input', val)
      },
      get() {
        return this.value
      }
    },
    minPlaceholder() {
      return this.propsMin?.placeholder || '请选择最小值'
    },
    maxPlaceholder() {
      return this.propsMax?.placeholder || '请选择最大值'
    },
  }
}
</script>

<style lang="scss" scoped>
.DatePickerRange{
  display: flex;
  gap: 20px;
}
</style>
